<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=2.0 user-scalable=yes"/>
    <title>我的主页</title>
    <link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="datatables/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="datatables/css/select.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="datatables/css/bootstrap-editable.css">

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 10px 0;
        }

        .table-action {
            text-align: center;
        }

        .point {
            cursor: pointer;
        }

    </style>

</head>
<body>

<div class="container">
    <div id="search-div" class="row">
        <!--<div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                       href="#collapseOne">
                        搜索功能区
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <form id="search-frm" role="form" method="post">
                    <div class="panel-body">
                        <div class="col-md-6 column">
                            <div class="form-group">
                                <label for="inputName">名称：</label>
                                <input type="text" name="name" class="form-control" id="inputName"/>
                            </div>
                        </div>
                        <div class="col-md-6 column">
                            <div class="form-group">
                                <label for="inputAge">年龄：</label>
                                <input type="number" name="age" class="form-control" id="inputAge" min="16" max="99"/>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-md-5 column">
                            </div>
                            <div class="col-md-7 column">
                                <button type="button" class="btn btn-primary btn-default btn-table-search">提 交</button>
                                <button type="reset" class="btn btn-default">取 消</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>-->
    </div>

    <div class="row">
        <div class="table-responsive" style="width: 100%;overflow: hidden;">
            <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="datatables/js/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="datatables/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="datatables/js/dataTables.select.js"></script>
<script type="text/javascript" src="datatables/js/bootstrap-editable.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="customer/js/my.datatables.server.js"></script>
<script type="text/javascript" src="form/jquery.form.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        var tools = '<div class="btn-group">\
            <a href="add.html" class="btn btn-default fa fa-plus-square-o">&nbsp;新增(form)</a>\
            <a href="add-ajax.html" class="btn btn-default fa fa-plus-square-o">&nbsp;新增(ajax)</a>\
            <a class="btn btn-default fa fa-minus-square-o auth oper-delete">&nbsp;删除</a>\
        </div>';

        // 列配置
        var columns =
                [
                    {
                        data: 'id', title: '操作', className: 'table-action', width: 50, orderable: false,
                        render: function (data, type, row, meta) {
//                            console.log(data);
//                            console.log(type);
//                            console.log(row);
//                            console.log(meta);

                            var result = '\
                                <span class="fa fa-edit point" title="更新" onclick="layer.msg(' + row.id + ')"></span>\
                            ';
                            return result;
                        }
                    },
                    {data: 'name', title: '姓名', editable: true, searchable: true},
                    {data: 'age', title: '年龄', orderable: false}
                ];

        var grid = $('#example').DGrid({
            gridName: 'example', // 给 grid起个名
            removeUrl: 'datatables/remove', // 配置删除路径
            tools: tools, // 操作按钮组
            // dataTable(options)，使用以下定义覆盖 options中的值
            gridOptions: {
                ajax: {
                    url: 'datatables' // 分页url
                },
                columns: columns
            },
            fnServerParams: function (aoData) {

            },
            search: true
        });

    });

</script>
</html>